<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魅族</title>
    <link rel="shortcut icon" href="../favicon-90c2e618ff.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/pc_common.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/header_nav.css">
    <link rel="stylesheet" href="../css/pagination.css">
    <link rel="stylesheet" href="../css/GoodList.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/common.js"></script>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/jquery.pagination.js"></script>
</head>

<body>
    <!-- ************** 引入头部导航 start ************** -->
    <div class="MZ_header">
        <!-- 导航栏 nav -->
    </div>
    <!-- ************** 引入头部导航 end ************** -->

    <!-- ************** 头部banner start ************** -->
    <div class="MZ_banner">
        <div class="banner">
        </div>
    </div>
    <!-- ************** 头部banner end ************** -->

    <!-- ************** 中部渲染区域center star ************** -->
    <div class="MZ_center">
        <div class="center">
            <div class="top">
                <span class="listName">商品</span>
                <div class="box">
                    <span>推荐</span>
                    <span>新品</span>
                    <span class="Price">价格</span>
                    <span class="prev">▲</span>
                    <span class="next">▼</span>
                </div>
            </div>

            <!-- 渲染区域 star -->
            <div class="list" id="goodslistall">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <img class="goodsImg" src="../images/phone01.png" alt="">
                            <p class="goodsName">魅族 18 Pro</p>
                            <p class="goodsMsg">【限时12期免息 | 4月10日-4月12日 每天定点赠好礼】骁龙 888 | 拒绝偷听 拒绝偷拍 拒绝跟踪 ｜ 三星 GN1 5000万像素
                                |
                                记忆金属光学防抖｜ 2K+ 120帧 6.7英寸微弧柔性屏 | 超声波屏下指纹解锁 0.1s湿手解锁 | 防尘防水 安全保护 | 4500mAh 超大电池</p>
                            <p class="goodsPrice">
                                <span>
                                    <w class="w">￥</w>4999
                                </span>
                            </p>
                        </a>
                    </li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <!-- 渲染区域 end -->
            <!-- 分页 -->
            <div class="pages">
                <div class="pageBox ">
                </div>
            </div>
            <!-- 分页 -->
            <div class="c_imgbox">
                <img src="../images/c_img.jpg" alt="">
            </div>

        </div>
    </div>
    <!-- ************** 中部渲染区域center end ************** -->

    <!-- ************** 为您推荐 star ************** -->
    <div class="MZ_recommend">
        <div class="recommend">
            <div class="top">
                为您推荐
            </div>
            <div class="wrapAll">
                <div class="xlb_images">
                    <ul>
                        <li>
                            <div class="iBox">
                                <img src="../images/xiaoLuBo_01.jpg" alt="">
                            </div>
                            <div class="txtBox">
                                <h4>魅族 18</h4>
                                <p>
                                    <span>
                                        <w class="w">￥</w>4399
                                    </span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="iBox">
                                <img src="../images/xiaoLuBo_02.jpg" alt="">
                            </div>
                            <div class="txtBox">
                                <h4>魅族 18 Pro</h4>
                                <p>
                                    <span>
                                        <w class="w">￥</w>4999
                                    </span>
                                </p>
                        </li>
                        <li>
                            <div class="iBox">
                                <img src="../images/xiaoLuBo_03.jpg" alt="">
                            </div>
                            <div class="txtBox">
                                <h4>魅族 17</h4>
                                <p>
                                    <span>
                                        <w class="w">￥</w>3699
                                    </span>
                                </p>
                        </li>
                        <li>
                            <div class="iBox">
                                <img src="../images/xiaoLuBo_04.jpg" alt="">
                            </div>
                            <div class="txtBox">
                                <h4>魅族 17 Pro</h4>
                                <p>
                                    <span>
                                        <w class="w">￥</w>4299
                                    </span>
                                </p>
                        </li>
                        <li>
                            <div class="iBox">
                                <img src="../images/xiaoLuBo_05.jpg" alt="">
                            </div>
                            <div class="txtBox">
                                <h4>魅族 POP2s 真无线耳机</h4>
                                <p>
                                    <span>
                                        <w class="w">￥</w>299
                                    </span>
                                </p>
                        </li>
                        <li>
                            <div class="iBox">
                                <img src="../images/xiaoLuBo_06.jpg" alt="">
                            </div>
                            <div class="txtBox">
                                <h4>魅族超充 GaN 三口充电器</h4>
                                <p>
                                    <span>
                                        <w class="w">￥</w>199
                                    </span>
                                </p>
                        </li>
                        <li>
                            <div class="iBox">
                                <img src="../images/xiaoLuBo_07.jpg" alt="">
                            </div>
                            <div class="txtBox">
                                <h4>魅族防飞溅声波电动牙刷</h4>
                                <p>
                                    <span>
                                        <w class="w">￥</w>299
                                    </span>
                                </p>
                        </li>
                        <li>
                            <div class="iBox">
                                <img src="../images/xiaoLuBo_08.jpg" alt="">
                            </div>
                            <div class="txtBox">
                                <h4>魅族超充 USB-C 移动电源</h4>
                                <p>
                                    <span>
                                        <w class="w">￥</w>169
                                    </span>
                                </p>
                        </li>
                    </ul>
                </div>
                <div class="ddd">
                    <ul>
                        <li class="aa"></li>
                        <li class="bb"></li>
                        <li class="cc"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- ************** 为您推荐 end ************** -->

    <!-- ************** 引入尾部 star ************** -->
    <div class="MZ_footer">
    </div>
    <!-- ************** 引入尾部 end ************** -->

</body>

<script>
    // **************  标识用户身份 ************************* //






    //引入头部导航栏 
    $(".MZ_header").load("./header_nav.html", function () {
        $.getScript("../js/header_nav.js", function () {
            console.log("header_nav.js载入完毕");
        })
    })



    //引入尾部 
    $(".MZ_footer").load("./common.html", function () {
        $.getScript("../js/goTop.js", function () {
            console.log("common.js加载完毕");
        })
    })




    //商品的动态渲染

    //功能三 主页面渲染


    $(function () {

        var key = ""; // 声明全局变量 记录搜索的关键词
        var orderCol = "id"; // 声明全局变量 记录排序的列名 (id,chinese )
        var orderType = "asc"; // 声明全局变量 记录排序的方式 (asc desc)
        var showNum = 12; // 声明全局变量 默认每页显示多少数据 
        var pageIndex = 1; // 声明全局变量 默认页码 

        loadGoods(key);

        //点击状态切换
        $(".box span").click(function () {
            $(this).addClass("actives").siblings().removeClass("actives")
        })

        //搜索
        $(document).on("click", ".inputBox i", function () {
            key = $(".search").val();
            console.log(key);
            loadGoods(key);
        })


        //排序
        $(".Price").click(function () {
            orderCol = " goodsPrice";
            loadGoods(key);
        })

        $(".prev").click(function () {
            orderCol = " goodsPrice";
            orderType = "asc";
            loadGoods(key);
        })

        $(".next").click(function () {
            orderCol = " goodsPrice";
            orderType = "desc";
            loadGoods(key);
        })



        //页面渲染
        function loadGoods(key) {
            searchAllGoodsOrderLimit({
                key,
                orderCol,
                orderType,
                pageIndex,
                showNum
            }).then(data => {
                console.log(data);
                var {
                    maxPage,
                    count,
                    list
                } = data;
                // 动态生成
                var html = "";
                list.forEach((item) => {
                    var {
                        goodsId,
                        goodsName,
                        goodsMsg,
                        goodsPrice,
                        goodsImg
                    } = item;

                    html += ` <li>
                        <a href="./GoodsDetail.html?gid=${goodsId}">
                            <img class="goodsImg" src="${goodsImg}" alt="">
                            <p class="goodsName">${goodsName}</p>
                            <p class="goodsMsg">${goodsMsg}</p>
                            <p class="goodsPrice">
                                <span>
                                    <w class="w">￥</w>${goodsPrice}
                                </span>
                            </p>
                        </a>
                    </li>`
                })
                $(".list ul").html(html);

                // 根据数据生成分页插件
                $(".pageBox").pagination({
                    totalData: count,
                    showData: showNum,
                    pageCount: maxPage,
                    current: pageIndex, //显示对应的页码
                    mode: "fixed",
                    count: 4,

                    coping: true, //是否显示首页和尾页 (默认显示页码)
                    homePage: '首页', //首页节点内容
                    endPage: '尾页', //尾页节点内容

                    jump: true, //跳转到指定页数
                    jumpBtn: 'GO', //跳转按钮文本

                    callback(api) {
                        console.log(api.getCurrent()); //点击的页码
                        pageIndex = api.getCurrent();
                        loadGoods(key);
                    }
                })

            }).catch(err => {
                throw err;
            })
        }

    })





    //下面的小轮播
    $(function () {
        var index = 0;
        var goWidth = $(".xlb_images li").width()
        console.log(goWidth);

        $(".ddd li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");

            index = $(this).index();

            $(".xlb_images ul").stop().animate({
                left: index == 2 ? (-goWidth * 2) * index : (-goWidth * 3) * index
            })
        })
    })
</script>

</html>